<template>
  <div>
    <form>
      <label>姓名：</label>
      <input type="text" v-model="name" /><br /><br />

      <label>年龄：</label>
      <input type="number" v-model="age" /><br /><br />

      <label>身高：</label>
      <input type="number" v-model="height" />(米)<br /><br />

      <label>体重：</label>
      <input type="number" v-model="weight" />(公斤)<br /><br />

      <label>病史：</label>
      <input type="text" v-model="bingshi" /><br /><br />

      <button @click.prevent="fun">诊断</button>
    </form>

    <p v-show="isshow">{{ name }} 的诊断结果：{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
      height: "",
      weight: "",
      bingshi: "",
      result: "",
      isshow: false,
    }
  },
  methods: {
    fun() {
      this.isshow = true
      const bmi = +this.weight / (+this.height * +this.height)
      console.log(bmi)
      if (bmi < 18.5) {
        this.result = "体重过轻"
      } else if (bmi >= 18.5 && bmi <= 24.9) {
        this.result = "正常"
      } else if (bmi >= 24.9 && bmi <= 29.9) {
        this.result = "体重过重"
      } else {
        this.result = "肥胖"
      }
    },
  },
}
</script>
